<template>
  <div class="Rapidupgrade">
    <section class="toolTop">
      <el-row :gutter="24" class="top_wrap">
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">{{cloudtitleupgrade}}</span>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <el-radio-group v-model="cloudShow" size="mini">
                    <el-radio
                      v-for="item in List"
                      v-bind:label="item.label"
                      v-bind:key="item.name"
                      border
                      @change="handleChangelist"
                    >{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥{{money}}/年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary" @click="payBtn">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">{{deviceCountupgrade}}</span>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <el-radio-group v-model="cloudShow1" size="mini">
                    <el-radio
                      v-for="item in List1"
                      v-bind:label="item.label"
                      v-bind:key="item.name"
                      border
                      @change="handleChangelist1"
                    >{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥{{money1}}/年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary" @click="payBtn1">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">{{bandwidthUpgrade}}</span>
              <div class="Hot">Hot</div>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <el-radio-group v-model="cloudShow2" size="mini">
                    <el-radio
                      v-for="item in List2"
                      v-bind:label="item.label"
                      v-bind:key="item.name"
                      border
                      @change="handleChangelist2"
                    >{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥{{money2}}/年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary" @click="payBtn2">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">{{lifetimeupgrade}}</span>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <el-radio-group v-model="cloudShow3" size="mini">
                    <el-radio
                      v-for="item in List3"
                      v-bind:label="item.label"
                      v-bind:key="item.name"
                      border
                      @change="handleChangelist3"
                    >{{item.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥{{money3}}/年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary" @click="payBtn3">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
    <section class="bottomTop">
      <el-row :gutter="24" class="top_wrap">
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">套餐实例①</span>
              <div class="Hot">Hot</div>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <div class="content">
                    <span>高效云盘 100G</span>
                    <span>设备数量 100台</span>
                    <span>带宽 4M</span>
                    <span>使用时长 1年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥688.90</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">套餐实例②</span>
              <div class="Hot">Hot</div>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <div class="content">
                    <span>高效云盘 200G</span>
                    <span>设备数量 200台</span>
                    <span>带宽 8M</span>
                    <span>使用时长 1年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥1688.80</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">套餐实例③</span>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <div class="content">
                    <span>高效云盘 100G</span>
                    <span>设备数量 100台</span>
                    <span>带宽 4M</span>
                    <span>使用时长 1年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥1288.80</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="title">套餐实例④</span>
            </div>
            <div class="text item">
              <el-form>
                <el-form-item>
                  <div class="content">
                    <span>高效云盘 100G</span>
                    <span>设备数量 100台</span>
                    <span>带宽 4M</span>
                    <span>使用时长 1年</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="price">
                    <label>价格:</label>
                    <span>￥2888.80</span>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div class="pay_wrap">
                    <el-button type="primary">立即购买</el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/usermg/subpayment/rapidupgrade.js"></script>

<style lang="scss">
.Rapidupgrade {
  flex: 1;
  > section {
    &.toolTop {
      height: auto !important;
      padding-bottom: 17px;
      .top_wrap {
        border-radius: 5px;
        padding: 8px 16px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #ffffff;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
            .Hot {
              color: #ffffff;
              background: #f8666a;
              font-size: 18px;
              width: 12%;
              text-align: center;
              float: right;
              border-radius: 5px;
              height: 25px;
              line-height: 25px;
            }
          }
          .el-card__body {
            .text {
              .el-form {
                .el-form-item {
                  .pay_wrap {
                    margin-top: -6%;
                    margin-bottom: -22px;
                  }
                  .el-radio-group {
                    margin-left: -3%;
                    .el-radio {
                      margin-top: 5%;
                      margin-right: 0px;
                      height: 30px;
                      margin-left: 10px;
                      border: 1px solid #9da4af;
                      .el-radio__inner {
                        border: none;
                        border-radius: 5px;
                        background-color: #1f2548;
                      }
                      .el-radio__inner::after {
                        border: none;
                        border-radius: 5px;
                        background-color: #1f2548;
                      }
                      .el-radio__label {
                        color: #9da4af;
                        padding-left: 0px;
                      }
                    }
                    .el-radio.is-checked {
                      border: 1px solid #ffffff;
                      color: #ffffff;
                      span {
                        color: #ffffff;
                      }
                    }
                  }
                  .price {
                    margin-top: 5%;
                    label {
                      color: #9da4af;
                      font-size: 18px;
                    }
                    span {
                      color: #f8666a;
                      font-size: 30px;
                    }
                  }
                  .el-button {
                    margin-top: -6%;
                    background: #44abf5;
                    height: 30px;
                    line-height: 5px;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
    &.bottomTop {
      height: auto !important;
      padding-bottom: 17px;
      .top_wrap {
        border-radius: 5px;
        padding: 8px 16px;
        .el-card {
          border-radius: 5px;
          background-color: #1f2548;
          border: 1px solid #1f2548;
          .el-card__header {
            border-bottom: 1px solid #4b506c;
            .title {
              margin-top: 0%;
              margin-left: 0%;
              font-size: 2rem;
              color: #ffffff;
              font-weight: 500;
              justify-content: center;
              align-items: center;
            }
            .Hot {
              color: #ffffff;
              background: #f8666a;
              font-size: 18px;
              width: 12%;
              text-align: center;
              float: right;
              border-radius: 5px;
              height: 25px;
              line-height: 25px;
            }
          }
          .el-card__body {
            .text {
              .el-form {
                .el-form-item {
                  .pay_wrap {
                    margin-top: -6%;
                    margin-bottom: -22px;
                  }
                  .content {
                    display: flex;
                    flex-direction: column;
                    span {
                      color: #9da4af;
                      font-size: 16px;
                    }
                  }
                  .price {
                    margin-top: 5%;
                    label {
                      color: #9da4af;
                      font-size: 18px;
                    }
                    span {
                      color: #f8666a;
                      font-size: 30px;
                    }
                  }
                  .el-button {
                    margin-top: -6%;
                    background: #44abf5;
                    height: 30px;
                    line-height: 5px;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
